import React, { Component } from 'react';
import '../styles/Commodity.css'
import pic1 from '../image/cat.jpg'
import pic2 from '../image/pic2.jpg'
import pic3 from '../image/pic3.jpg'
import pic4 from '../image/pic4.jpg'
import pic5 from '../image/pic5.jpg'
import pic6 from '../image/pic6.jpg'
import pic7 from '../image/pic7.jpg'
import pic8 from '../image/pic8.jpg'

class Commodity extends Component {
    state = {
        list: [
            { img:pic1, text: 'Ulike 蓝宝石冰玉脱毛仪', Price: '￥303', Grab: 195 ,Sales:1000},
            { img:pic2, text: 'Ulike 蓝宝石冰玉脱毛仪', Price: '￥924', Grab: 675 ,Sales:1500},
            { img:pic3, text: 'Ulike 蓝宝石冰玉脱毛仪', Price: '￥2826', Grab: 2543 ,Sales:500},
            { img:pic4, text: 'Ulike 蓝宝石冰玉脱毛仪', Price: '￥430', Grab: 413 ,Sales:3000},
            { img:pic5, text: 'Ulike 蓝宝石冰玉脱毛仪', Price: '￥110', Grab: 93 ,Sales:2000},
            { img:pic6, text: 'Ulike 蓝宝石冰玉脱毛仪', Price: '￥1749', Grab: 1487 ,Sales:600},
            { img:pic7, text: 'Ulike 蓝宝石冰玉脱毛仪', Price: '￥509', Grab: 495 ,Sales:900},
            { img:pic8, text: 'Ulike 蓝宝石冰玉脱毛仪', Price: '￥275', Grab: 225 ,Sales:3000},
        ],
        btnlist: [
            { name: '综合' },
            { name: '销量' },
            { name: '新品' },
            { name: '价格' },
            { name: '筛选' },
        ],
        cuurnntindex: 0
    }
    btnclick(index) {
        this.setState({ cuurnntindex: index })
        if (index == 3) {
            this.state.list.sort((a, b) => {
                return (a.Grab) - (b.Grab)
            })
        } else if (index == 0) {
            this.setState({ list: [
                { img:pic1, text: 'Ulike 蓝宝石冰玉脱毛仪', Price: '￥303', Grab: 195 ,Sales:1000},
                { img:pic2, text: 'Ulike 蓝宝石冰玉脱毛仪', Price: '￥924', Grab: 675 ,Sales:1500},
                { img:pic3, text: 'Ulike 蓝宝石冰玉脱毛仪', Price: '￥2826', Grab: 2543 ,Sales:500},
                { img:pic4, text: 'Ulike 蓝宝石冰玉脱毛仪', Price: '￥430', Grab: 413 ,Sales:3000},
                { img:pic5, text: 'Ulike 蓝宝石冰玉脱毛仪', Price: '￥110', Grab: 93 ,Sales:2000},
                { img:pic6, text: 'Ulike 蓝宝石冰玉脱毛仪', Price: '￥1749', Grab: 1487 ,Sales:600},
                { img:pic7, text: 'Ulike 蓝宝石冰玉脱毛仪', Price: '￥509', Grab: 495 ,Sales:900},
                { img:pic8, text: 'Ulike 蓝宝石冰玉脱毛仪', Price: '￥275', Grab: 225 ,Sales:3000},
            ] })
        }else if(index==1){
            this.state.list.sort((a,b)=>{
                    return (a.Sales)-(b.Sales)
            })
        }
    }
    render() {
        return (
            <div className='commodity'>
                <div className="btn">
                    {
                        this.state.btnlist.map((item, index) => {
                            return (
                                <span className={this.state.cuurnntindex == index ? 'active' : ''} onClick={() => { this.btnclick(index) }}>{item.name}</span>
                            )
                        })
                    }
                </div>
                {
                    this.state.list.map((item, index) => {
                        return (
                            <div className="item" key={index}>
                                <img src={item.img} alt="" />
                                <p>{item.text}</p>
                                <span>原价：{item.Price}</span>
                                <div>抢购价：￥{item.Grab}</div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default Commodity;